import React, { PureComponent } from 'react'
import {View, Text, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'
import screen from '../../../../utils/screen'

export default class extends PureComponent {
  static propTypes = {
    titles: PropTypes.any
  }

  render() {
    const { title } = this.props;
    const line = title || {};
    return (
      <View style={[styles.line]}>
        <View style={[styles.lineCell, styles.one]}>
          <Text>{line.name}</Text>
        </View>
        <View style={[styles.lineCell, styles.two]}>
          <Text>{line.amount}</Text>
        </View>
        <View style={[styles.lineCell, styles.three]}>
          <Text>{line.yoy}</Text>
        </View>
        <View style={[styles.lineCell, styles.four]}>
          <Text>{line.qoq}</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  line: {
    flexDirection: 'row',
    backgroundColor: '#ebebeb',
    height: screen.pxToDp(100)
  },
  lineCell: {
    justifyContent: 'center',
    marginHorizontal:screen.pxToDp(5)
  },
  titleFont: {
    color: '#636363',
    fontSize: screen.pxToDp(30)
  },
  one: {
    width: screen.pxToDp(260),
    paddingLeft: screen.pxToDp(31)
  },
  two: {
    flex: 3
  },
  three: {
    flex:2
  },
  four: {
    flex: 2
  }
})
